<template>
	<div class="app">
		
		<el-container class="is-vertical">
			<HeaderComponents v-if="isClosedHeader">Header</HeaderComponents>
			<el-container>
				<AsideComponents v-if="isClosedAside"></AsideComponents>
				<el-container class="is-vertical">
					<el-main :class="{ 'el-login': !isClosedHeader }" class="app-main">
						<router-view />
					</el-main>
					<FooterComponents v-if="isClosedFooter"></FooterComponents>
				</el-container>
			</el-container>
		</el-container>
		
		
		
	</div>
</template>

<script lang="ts">
	import { Component, Vue } from "vue-property-decorator";
	import { State, Getter, Action, Mutation } from 'vuex-class'
	
	import HeaderComponents from "./view/public/header"
	import FooterComponents from "./view/public/footer"
	import AsideComponents from "./view/public/aside"
	
	
	@Component({
		components: {
			HeaderComponents,
			FooterComponents,
			AsideComponents
		}
	})
	export default class App extends Vue {
		@Action('getAllClass') getAllClassActions;
		@Getter('isClosedFooter') isClosedFooter;
		@Getter('isClosedHeader') isClosedHeader;
		@Getter('isClosedAside') isClosedAside;
		
		created () {
			this.getAllClassActions()
		}
		
	}
</script>

<style lang="less">
	@import "./assets/less/App";
	.el-login,
	.el-header{
		padding: 0px !important;
		width: 100% !important;
		margin: 0 !important;
	}
	.app-main {
		margin-top: 60px;
		margin-left: 200px;
	}
	.el-footer {
		text-align: center;
		color: #8d8d8d;
	}
	a {
		text-decoration: none;
		color: #909399;
	}
</style>